<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>gamepic-test</title>
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/effects.css">
    <script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>  
    <script src="js/stickyelements-animate.js"></script>
    <style type="text/css" media="screen">
    #myCanvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 200;
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <!-- particles.js container -->
    <div id="particles-js">
    </div>
    <!--content start-->
    <canvas id="myCanvas" style="cursor: inherit;">
        您的浏览器不支持canvas！
    </canvas>
    <!-- scripts -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../particles.js"></script>
    <script src="js/effects.js"></script>
    <script type="text/javascript">
    window.onload = function() {
        // canvas设置宽高
        window.addEventListener("myCanvas", resizeCanvas, false);

        function resizeCanvas() {
            w = canvas.width = document.body.clientWidth;
            h = canvas.height = document.body.clientHeight;
            console.log(h)
        }


        var canvas = document.getElementById('myCanvas'); //获取canvas元素
        canvas.width = document.body.clientWidth;
        canvas.height = document.body.clientHeight;
        var ctx = canvas.getContext('2d'), //获取画图环境，指明为2d
            centerX = canvas.width / 2, //Canvas中心点x轴坐标
            centerY = canvas.height / 2, //Canvas中心点y轴坐标
            rad = Math.PI * 2 / 9, //将360度分成100份，那么每一份就是rad度
            trad = rad * Math.PI / 180; //对应的弧度

        //绘制白色中心圆
        function whiteCircle() {
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = "white";
            ctx.lineWidth = 1; //设置线宽
            ctx.arc(centerX, centerY, 100, 0, Math.PI * 2, false);
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        whiteCircle();


        // // 路径绘制(1)
        // ctx.beginPath(); // 开始路径绘制
        // ctx.moveTo(Math.sin((trad * 1)) * 100 + centerX,Math.cos((trad * 1)) * 100 + centerY); // 设置路径起点，坐标为(20,20)
        // ctx.lineTo(Math.sin((trad * 1)) * 100 + centerX,Math.cos((trad * 1)) * 300 + centerY); // 绘制一条到(200,20)的直线
        // ctx.lineWidth = 1.0; // 设置线宽
        // ctx.strokeStyle = "#fff"; // 设置线的颜色
        // ctx.stroke(); // 进行线的着色，这时整条线才变得可见


        //绘制
        function draw() {
            var canvas = document.getElementById('myCanvas');
            if (canvas == null)
                return false;
            var ctx = canvas.getContext("2d");
            var n = 0;
            var dx = canvas.width / 2; //中心点横坐标
            var dy = canvas.height / 2; //中心点纵坐标
            var r = 100; //半径

            //绘制发散的线条
            ctx.beginPath();
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI * 2 / 8; //角度,整个圆分为9份
            for (var i = 0; i < 8; i++) {
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                var endX = dx + x * (r + 180); //绘制终点x坐标
                var endY = dy + y * (r + 180); //绘制终点y轴坐标
                ctx.moveTo(dx + x * r, dy + y * r); //设置路径起点
                ctx.lineTo(endX, endY); //设置线条终点
                ctx.stroke();
                ctx.strokeStyle = "#fff"; // 设置线的颜色
                ctx.closePath();

                //开始绘制外圈小圆
                ctx.moveTo(endX, endY);
                ctx.beginPath();
                ctx.arc(dx + x * (r + 180 + 35), dy + y * (r + 180 + 35), 35, 0, Math.PI * 2, true);
                ctx.strokeStyle = "#fff"; // 设置线的颜色
                ctx.stroke();
                ctx.closePath();

                // 绘制图片     
                ctx.beginPath();
                var images = new Array(i);
                var imagesSrc = new Array(i);
               images[i] = new Image();
               imagesSrc[i] = "img/" + [i + 1] + '.jpg';
                // console.log(images[i]);
                // console.log(endX + '|' + endY);
                images[i].src = imagesSrc[i];
                // images.onload = function() {
                    // alert('111');
                    // 创建图片纹理
                    var pattern = ctx.createPattern(images[i], "no-repeat");
                    console.log(pattern);
                    // ctx.drawImage(images[i],10, 10, 200, 200);
                    // 填充绘制的圆
                    ctx.fillStyle = pattern;
                    ctx.fillRect(0, 0, 200, 100);
                    ctx.fill();
                // }
             

            }
            ctx.strokeStyle = "#fff"; // 设置线的颜色
            ctx.closePath();
            ctx.stroke();
        }

        draw();




        // canvas元素, 图片元素
// var canvas = document.querySelector("#myCanvas"), image = new Image();
// var context = canvas.getContext("2d");

// image.onload = function() {
//     // 创建图片纹理
//     var pattern = context.createPattern(image, "no-repeat");
//     // 绘制一个圆
//     context.arc(50, 50, 100, 0, 2 * Math.PI);
//     // 填充绘制的圆
//     context.fillStyle = pattern;
//     context.fill();    
// };
// image.src = "img/1.jpg";



        // // canvas元素, 图片元素
        // var canvas = document.querySelector("#myCanvas"), image = new Image();
        // var context = canvas.getContext("2d");

        // image.onload = function() {
        //     // 创建图片纹理
        //     var pattern = context.createPattern(image, "no-repeat");
        //     // 绘制一个圆
        //     context.arc(50, 50, 50, 0, 2 * Math.PI);
        //     // 填充绘制的圆
        //     context.fillStyle = pattern;
        //     context.fill();    
        // };
        // image.src = "img/1.jpg";

        // //绘制蓝色外圈
        // function blueCircle(n) {
        //     ctx.save();
        //     ctx.strokeStyle = "#49f"; //设置描边样式
        //     ctx.lineWidth = 5; //设置线宽
        //     ctx.beginPath(); //路径开始
        //     ctx.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧ctx.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        //     ctx.stroke(); //绘制
        //     ctx.closePath(); //路径结束
        //     ctx.restore();
        // }

        // //绘制图片
        // var images = new Array(9);
        // var imagesSrc = new Array(9);
        // for (var i = 0; i < 8; i++) {
        //     images[i] = new Image();
        //     imagesSrc[i] = data[i].img;
        //     //console.log(images[i]);
        // }
        // var rx = centerx,
        //     ry = centery;
        // var px = 0,
        //     py = 90;
        // var radius = ry - py;

        // var getPixelRatio = function(ctx) {
        //     var backingStore = ctx.backingStorePixelRatio ||
        //         ctx.webkitBackingStorePixelRatio ||
        //         ctx.mozBackingStorePixelRatio ||
        //         ctx.msBackingStorePixelRatio ||
        //         ctx.oBackingStorePixelRatio ||
        //         ctx.backingStorePixelRatio || 1;
        //     return (window.devicePixelRatio || 1) / backingStore;
        // };

        // //绘制图片
        // var images = new Array(9);
        // var imagesSrc = new Array(9);
        // for (var i = 0, dlen = data.length; i < dlen; i++) {
        //     images[i] = new Image();
        //     imagesSrc[i] = data[i].img;
        //     //console.log(images[i]);
        // }
        // var rx = centerx,
        //     ry = centery;
        // var px = 0,
        //     py = 90;
        // var radius = ry - py;

        // var getPixelRatio = function(ctx) {
        //     var backingStore = ctx.backingStorePixelRatio ||
        //         ctx.webkitBackingStorePixelRatio ||
        //         ctx.mozBackingStorePixelRatio ||
        //         ctx.msBackingStorePixelRatio ||
        //         ctx.oBackingStorePixelRatio ||
        //         ctx.backingStorePixelRatio || 1;
        //     return (window.devicePixelRatio || 1) / backingStore;
        // };

        //     //调用
        //     var ratio = getPixelRatio(ctx);
        //     //100积分
        //     images[0].onload = function() {
        //         var angle = (40 + 0 * 45) * Math.PI / 180;
        //         var dx = rx + radius * Math.sin(angle);
        //         var dy = ry - radius * Math.cos(angle);
        //         ctx.save();
        //         ctx.translate(dx, dy);
        //         ctx.rotate(angle);
        //         ctx.translate(-dx, -dy);

        //         ctx.drawImage(images[0], dx - images[0].width / 2, dy - images[0].height / 2, (images[0].width) * ratio,
        //             (images[0].height / 2)) * ratio;
        //         ctx.restore();
        //     }
        //     images[0].src = imagesSrc[0];
    }
    </script>
</body>

</html>
